<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>登录日志列表</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{static/plugins/layui/css/layui.css}"/>
</head>
<body>

<div style="margin:10px;">

    <!-- 查询条件 -->
    <div class="layui-row">
        <form class="layui-form" id="formData">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">登录时间</label>
                    <div class="layui-input-inline" style="width: 160px;">
                        <input type="text" name="startTime" id="startTime" readonly placeholder="-- 开始 --"
                               autocomplete="off" class="layui-input date">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 160px;">
                        <input type="text" name="endTime" id="endTime" readonly placeholder="-- 结束 --"
                               autocomplete="off" class="layui-input date">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit lay-filter="doSearchFilter"><i class="layui-icon">&#58901;</i>查询</button>
                    <button class="layui-btn layui-btn-normal layui-btn-radius layui-btn-danger" type="reset" >重置</button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-row">
        <table id="log_login_table" lay-filter="log_login_table_filter"></table>
    </div>
</div>

<!--<script type="text/html" id="toolBar">-->
    <!--<a class="layui-btn layui-btn-xs color-green" lay-event="detail">明细</a>-->
<!--</script>-->

<!-- JS -->
<script type="text/javascript" th:src="@{static/plugins/layui/layui.js}"></script>

<script th:inline="javascript">

    layui.use(['form', 'layer','table','laydate'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;

        //日期框渲染
        lay('.date').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click',
                theme: 'grid',
                format: 'yyyy-MM-dd'
            });
        });

        table.render({
            elem:'#log_login_table',
            id:'log_login_table_id',
            url:'sysLog/getSysLogs?sl01=201810282236115607',
            where:$('#formData').serializeArray(),//将查询条件表单内容序列化
            page:true,
            limit:10,
            cols:[
                [
                {type: 'numbers', width: '5%'},
                {field: 'sl02', title: '登录人', align: 'center', width: '20%'},
                {field: 'sl03', title: '登录时间', align: 'center', width: '25%'},
                {field: 'sl04', title: '登录IP', align: 'center', width: '25%'},
                {field: 'sl05', title: '服务器IP', align: 'center', width: '25%'}
            ]
            ],
            height:500,
            skin: 'nob ', //表格风格
            even: true, //是否开启隔行背景
            done:function(res,curr,count){
                table.cache["currentPage"] = curr; //当前页
            }
        });

        //查询
        form.on('submit(doSearchFilter)', function(data){
            //判断输入时间是否正确
            var startTime = $('#startTime').val();
            var endTime = $('#endTime').val();
            if(endTime.length > 0 && startTime > endTime){
                layer.msg("开始时间不能大于结束时间",{icon:5,time:2000});
            }else{
                //重载table
                table.reload('log_login_table_id', {
                    where:data.field
                });
            }
            return false;
        });

        //监听工具条
        // table.on('tool(log_login_table_filter)', function (obj) {
        //     var data = obj.data; //获得当前行数据
        //     if (obj.event === 'detail') {
                // layer.open({
                //     type: 2,
                //     id: 'detailLayer',
                //     title: '明细',
                //     shadeClose: false,
                //     maxmin: false, //开启最大化最小化按钮
                //     area: ['1100px', '90%'],
                //     content: 'toSysLogDetail?su00=' + data.su00,
                //     success: function(layero, index){
                //     }
                // });
        //     }
        // });

    });
</script>

</body>
</html>